{% extends 'layout.html' %}

{% load static %}

{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading">表单</div>
        <div class="panel-body">
{#ajax提交#}
            <form  id="addForm">
                <div class="clearfix">
                 {% for item in form %}
                     <div class="col-xs-6">
                      <div class="form-group" style="position: relative;margin-bottom:20px ">
                        <label>{{ item.label }} </label>
                          {{ item }}
                          <span style="color: red;position: absolute"></span>
                    </div>
                      </div>
                    {% endfor %}
                <div class="col-xs-12">
{#                    增加id已Ajax提交#}
                    <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
                </div>
                </div>

            </form>
        </div>
</div>
    {% block js %}
        <script type="text/javascript">
            var edit_id;
            $(this).
            $(function (){
                //写个方法
                bindBtnAddEvent();
                }
            )
            function bindBtnAddEvent(){
                $("#btnAdd").click(
                    function(){
                        $.ajax({
                            url:'/task/edit/',
                            type:'post',
                            data:$("#addForm").serialize(),
                            dataType:'JSON',
                            success:function(res){
                                if(res.status){
                                    alert("添加成功")
                                }else {
                                    $.each(
                                        res.error,function (name,date){
                                            console.log(name,date);
                                            $("#id_"+name).next().text(date[0])
                                        }
                                    )
                                }

                            }
                        })
                    }
                )
            }
        </script>
    {% endblock %}
{% endblock %}